<template>
  <div class="local-pdf-test">
    <div class="test-header">
      <h2>本地PDF.js配置测试</h2>
      <p>测试本地PDF.js worker文件是否正确加载</p>
    </div>
    
    <div class="test-section">
      <h3>配置测试</h3>
      <el-button @click="testConfiguration" type="primary" :loading="configTesting">
        测试PDF.js配置
      </el-button>
      
      <div v-if="configResult" class="test-result" :class="configResult.success ? 'success' : 'error'">
        <h4>配置测试结果:</h4>
        <pre>{{ JSON.stringify(configResult, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="test-section">
      <h3>Worker文件测试</h3>
      <el-button @click="testWorkerFile" type="primary" :loading="workerTesting">
        测试Worker文件访问
      </el-button>
      
      <div v-if="workerResult" class="test-result" :class="workerResult.success ? 'success' : 'error'">
        <h4>Worker文件测试结果:</h4>
        <p><strong>状态:</strong> {{ workerResult.success ? '✅ 成功' : '❌ 失败' }}</p>
        <p><strong>URL:</strong> {{ workerResult.url }}</p>
        <p><strong>状态码:</strong> {{ workerResult.status }}</p>
        <p v-if="workerResult.error"><strong>错误:</strong> {{ workerResult.error }}</p>
      </div>
    </div>
    
    <div class="test-section">
      <h3>PDF加载测试</h3>
      <el-button @click="testPdfLoad" type="primary" :loading="pdfTesting">
        测试PDF加载
      </el-button>
      
      <div v-if="pdfResult" class="test-result" :class="pdfResult.success ? 'success' : 'error'">
        <h4>PDF加载测试结果:</h4>
        <p><strong>状态:</strong> {{ pdfResult.success ? '✅ 成功' : '❌ 失败' }}</p>
        <p v-if="pdfResult.numPages"><strong>页数:</strong> {{ pdfResult.numPages }}</p>
        <p v-if="pdfResult.error"><strong>错误:</strong> {{ pdfResult.error }}</p>
      </div>
    </div>
    
    <div class="console-section">
      <h3>控制台日志</h3>
      <p class="console-tip">请打开浏览器开发者工具查看详细的控制台输出</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { configurePDFJS, testPDFLoad } from '@/utils/pdfConfig'

// 响应式数据
const configTesting = ref(false)
const configResult = ref(null)

const workerTesting = ref(false)
const workerResult = ref(null)

const pdfTesting = ref(false)
const pdfResult = ref(null)

// 测试PDF.js配置
const testConfiguration = async () => {
  configTesting.value = true
  configResult.value = null
  
  try {
    console.log('=== 开始PDF.js配置测试 ===')
    const result = await configurePDFJS()
    configResult.value = result
    
    if (result.success) {
      ElMessage.success('PDF.js配置测试成功')
    } else {
      ElMessage.error('PDF.js配置测试失败: ' + result.error)
    }
  } catch (error) {
    console.error('配置测试异常:', error)
    configResult.value = {
      success: false,
      error: error.message
    }
    ElMessage.error('配置测试异常: ' + error.message)
  } finally {
    configTesting.value = false
  }
}

// 测试Worker文件访问
const testWorkerFile = async () => {
  workerTesting.value = true
  workerResult.value = null
  
  try {
    console.log('=== 开始Worker文件测试 ===')
    const workerUrl = '/pdf.worker.min.js'
    
    const response = await fetch(workerUrl)
    const result = {
      success: response.ok,
      url: workerUrl,
      status: response.status,
      statusText: response.statusText
    }
    
    if (!response.ok) {
      result.error = `HTTP ${response.status}: ${response.statusText}`
    }
    
    workerResult.value = result
    
    if (result.success) {
      ElMessage.success('Worker文件访问成功')
    } else {
      ElMessage.error('Worker文件访问失败: ' + result.error)
    }
  } catch (error) {
    console.error('Worker文件测试异常:', error)
    workerResult.value = {
      success: false,
      url: '/pdf.worker.min.js',
      error: error.message
    }
    ElMessage.error('Worker文件测试异常: ' + error.message)
  } finally {
    workerTesting.value = false
  }
}

// 测试PDF加载
const testPdfLoad = async () => {
  pdfTesting.value = true
  pdfResult.value = null
  
  try {
    console.log('=== 开始PDF加载测试 ===')
    // 使用一个简单的测试PDF
    const testPdfUrl = 'data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKPj4KZW5kb2JqCjIgMCBvYmoKPDwKL1R5cGUgL1BhZ2VzCi9LaWRzIFszIDAgUl0KL0NvdW50IDEKPD4KZW5kb2JqCjMgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCAyIDAgUgovTWVkaWFCb3ggWzAgMCA2MTIgNzkyXQo+PgplbmRvYmoKeHJlZgowIDQKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTggMDAwMDAgbiAKMDAwMDAwMDExNSAwMDAwMCBuIAp0cmFpbGVyCjw8Ci9TaXplIDQKL1Jvb3QgMSAwIFIKPj4Kc3RhcnR4cmVmCjE3NQolJUVPRg=='
    
    const result = await testPDFLoad(testPdfUrl)
    pdfResult.value = result
    
    if (result.success) {
      ElMessage.success('PDF加载测试成功')
    } else {
      ElMessage.error('PDF加载测试失败: ' + result.error)
    }
  } catch (error) {
    console.error('PDF加载测试异常:', error)
    pdfResult.value = {
      success: false,
      error: error.message
    }
    ElMessage.error('PDF加载测试异常: ' + error.message)
  } finally {
    pdfTesting.value = false
  }
}
</script>

<style scoped lang="scss">
.local-pdf-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
  
  h2 {
    color: #303133;
    margin-bottom: 10px;
  }
  
  p {
    color: #606266;
    font-size: 14px;
  }
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  
  h3 {
    color: #303133;
    margin-bottom: 15px;
  }
}

.test-result {
  margin-top: 15px;
  padding: 15px;
  border-radius: 6px;
  
  &.success {
    background-color: #f0f9ff;
    border: 1px solid #67c23a;
    color: #67c23a;
  }
  
  &.error {
    background-color: #fef0f0;
    border: 1px solid #f56c6c;
    color: #f56c6c;
  }
  
  h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  
  p {
    margin: 5px 0;
    font-size: 13px;
  }
  
  pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
  }
}

.console-section {
  margin-top: 30px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  
  h3 {
    color: #303133;
    margin-bottom: 10px;
  }
  
  .console-tip {
    color: #909399;
    font-size: 13px;
    font-style: italic;
  }
}
</style>
